<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.tudou {
			position: relative;
			width: 444px;
			height: 320px;
			margin: 20px auto;
			background-color: hotpink;
		}

		.tudou img {
			width: 100%;
			height: 100%;
		}

		.tudou::before {
			/* 一定不能忘记要加上content属性; */
			content: '';
			display: none;
			position: absolute;
			left: 0;
			top: 0;
			width: 444px;
			height: 320px;
			background: rgba(0, 0, 0, 0.3) url(../images/arr.png) no-repeat center;
		}

		.tudou:hover::before {
			display: block;
		}

		/* 这个案例的优化在于直接把以前的mask遮罩层盒子改成伪元素来实现 */
	</style>
</head>

<body>
	<div class="tudou">
		<img src="../images/tudou.jpg" alt="">
	</div>
	<h1>如今已经学完了伪元素选择器，再回头去看伪元素法清除浮动已经可以明白他的实现原理了，它实际上就是标签法清除浮动的升级优化做法，因为标签法需要在最后一个浮动的盒子后加一个空标签，并且这个空标签必须是块级元素，所以才出现了伪元素法代码里的那几行,之所以是单冒号是为了照顾ie8低版本浏览器。双伪元素法中display:table就是把before和
		after 放到一行上显示

	</h1>
</body>

</html>